<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Imaginer零代码平台</title>
	<link rel="icon" href="./assets/img/zerocode_logo.png" sizes="16x16" type="image/png">
	<link rel="stylesheet" href="./assets/css/style.css">

	<!-- <script src="./assets/lib/bootstrap/bootstrap.bundle.min.js"></script> -->
	<!-- <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css"> -->

	<style>
		* {
			font-weight: 400;
		}

		body {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #000;
			margin: 0;
			padding: 0;
			overflow-x: hidden;
		}

		/* 首页大轮播图 */
		.news-swiper {
			overflow-x: hidden;
		}

		/* 大轮播图容器 */
		#BigContainer {
			width: 100%;
			overflow-x: hidden;
			position: relative;
		}

		/* 大轮播图幻灯片 */
		#BigContainer>.swiper-wrapper>.swiper-slide {
			text-align: center;
			cursor: pointer;
		}

		/* 大轮播图幻灯片中文字 */
		#BigContainer>.swiper-wrapper>.swiper-slide>p {
			position: relative;
			top: -30px;
			color: #fff;
		}

		#BigContainer>.swiper-wrapper>.swiper-slide>div {
			width: 100%;
			height: 25vw;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		/* ********** 下面是动画效果 ********** */
		.hoverToSmall,
		.hoverToLarge,
		.hoverToSLarge {
			transition-duration: 0.4s;
			transition-timing-function: cubic-bezier(0.22, 0.02, 0, 1.41);
		}

		.hoverToLarge:hover {
			transform: scale(1.1);
		}

		.hoverToSLarge:hover {
			transform: scale(1.03);
		}
	</style>
</head>

<body>
	<!-- ---------------------------头部内容---------------------------------------------------- -->
	<div class="header">
		<div class="header-container">
			<div class="head-logo">
				<img id='logoImg' src="./assets/img/Imaginer.svg" style="height: 70px; width: 90px; cursor: pointer;"
					onclick="location.href='./index.html'" />
			</div>
			<div class='nav_container'>
				<div class="nav">
					<!-- 通用模块部分-->
					<div class="nav-item">
						<a class="nav-link" href="./index.html">
							<nobr>网站首页</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="./module_market.html">
							<nobr>模块商城</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="/">
							<nobr>快速使用</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="http://zps-club.only4.work/">
							<nobr>零代码社区</nobr>
						</a>
					</div>
				</div>
			</div>
			<div>
				<div id="work-btn" onclick="location.href='http://zps-proj.only4.work/project'">
					工作台
				</div>
			</div>
		</div>
	</div>

	<style>
		#background-container {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			background-image: url(./assets/img/background.jpg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		
	</style>
	<div id="container">
		<!-- ---------------------------首页内容------------------------------------ -->
		<div id="background-container"></div>

		<div style="height: 60vh; display: grid; grid-template-columns: repeat(2, 1fr); place-items: center;padding-top: 170px;">
			<div style="text-align: right;">
				<img id="jump1" src="./assets/img/tutor1.png" style="width: 80%; max-height: 100vh;" />
			</div>
			<div style="width: 100%; text-align: left; color: white; padding-left: 180px;">
				<h1 style="font-size: 60px;margin-bottom: 30px;">页面布局</h1>
				<h3 style="width: 80%;">页面布局即用户可根据自身需要自定义整个应用UI界面的结构和布局设置。
					在本系统中，用户可以首先在左侧“容器”栏目下点击选择界面的总体样式，随后在“组件”栏目下方点击选择所需要的、相应的组件并拖拽至界面的一定位置，来对界面进行进一步的详细布局，从而确定整个界面的布局。
					</h3>
			</div>
		</div>

		<div style="height: 60vh; display: grid; grid-template-columns: repeat(2, 1fr); place-items: center;">
			
			<div style="width: 100%; text-align: left; color: white; padding-left: 180px;">
				<h1 style="font-size: 60px;margin-bottom: 30px;">样式设置</h1>
				<h3 style="text-align: left;width: 80%;">样式设置即用户可根据自身需要对界面中的元素进行大小、颜色、位置等样式进行设置。
					在本系统中，用户可以首先选中相应的元素，通过拖拽移动改变元素的位置或大小，也可以在右侧“属性样式”栏目下点击选择 相应的样式进行调节设置。
					</h3>
			</div>
			<div style="text-align: left;">
				<img id="jump1" src="./assets/img/tutor1.png" style="width: 80%; max-height: 100vh;" />
			</div>
		</div>

		<div style="height: 60vh; display: grid; grid-template-columns: repeat(2, 1fr); place-items: center;">
			<div style="text-align: right;">
				<img id="jump1" src="./assets/img/tutor3.png" style="width: 80%; max-height: 100vh;" />
			</div>
			<div style="width: 100%; text-align: left; color: white; padding-left: 180px;">
				<h1 style="font-size: 60px;margin-bottom: 30px;">定义交互逻辑</h1>
				<h3 style="width: 80%;">前端交互逻辑设计即用户可自定义界面根据用户的行为（键盘输入、鼠标移动、触摸等）进行相应的变化。
					在本系统中，用户首先选择需要进行交互设置的目标元素，随后在右侧“交互”栏目下，选择交互时的触发方式、交互功能、打开类型并输入目标文本，由此完成设置。
					</h3>
			</div>
		</div>
			
		<div style=" display: grid; grid-template-columns: repeat(2, 1fr); place-items: center;padding-top: 70px;margin-bottom: 70px;">
			
			<div style="width: 100%; text-align: left; color: white; padding-left: 180px;">
				<h1 style="font-size: 60px;margin-bottom: 30px;">工作流设计</h1>
				<h3 style="width: 80%;">
					本系统拥有可视化图形界面，并提供丰富的功能模块。用户可以通过上述操作设计界面。在此界面下，用户能够以拖拽图形化模块的方式构建应用的运行逻辑，实现某一特定的功能，从而搭建自己的应用的运行逻辑，以满足用户多元化、个性化的需求。例如，用户需要实现一个十进制数转换为二进制数的功能，则可通过如图方式实现：
				</h3>
			</div>
			<div style="text-align: left;padding-top: 50px;">
				<img id="jump1" src="./assets/img/tutor4.png" style="width: 80%; max-height: 100vh;;" />
			</div>
		</div>

		</div>

		

		<!-- <div style="text-align: center;">
			<a href="https://baijiahao.baidu.com/s?id=1724086482352312366" target="_blank"
				style="display: inline-block;">
				<img src="./assets/img/gif.gif" style="width: 450px;" />
			</a>
		</div> -->

	</div>

	<!-- ---------------------------页脚内容------------------------------------ -->
	<div class="footer">
		<div class="website-info">
			<div class="about">
				<h4>关于本平台</h4>
				<p>1.基于Vue开发</p>
				<p>3.本站于二〇二一年九月开始建站</p>
			</div>
			<div class="response">
				<h4>建议反馈</h4>
				<p>1.欢迎注册体验</p>
				<p>2.可通过gitee给我们建议</p>
				<p>3.发邮件到xxx@xx.com</p>
			</div>
			<div class="contact">
				<h4>欢迎联系</h4>
				<p>灵创通代</p>
				<p><a href="https://gitee.com/only4/GMS">零代码应用开发平台</a></p>
			</div>
		</div>
		<div class="copyright">
			<span>Welcome to visit our ZPS © 灵创通代</span>
			<span class="hidden-xs"><a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备xxx(备案号)</a></span>
		</div>
	</div>
</body>

</html>